﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>登陆页面</title>

    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <link href="../css/font-awesome.css" rel="stylesheet"/>

    <style>
        html { height: 100%; }
        body { height: 100%; background: #fff url(../img/bg.jpg) 50% 50% no-repeat; background-size: cover;}
        .panel-body {top:50%; left:50%; width: 430px; height: 550px; margin: 60px 0 0 -40px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}
        .form-group input-group{ position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
        .form-group input-group input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
        .form-group input-group button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }
        [v-cloak] {
            display: none;
        }
        .table th, .table td {
            text-align: center !important;
            vertical-align: middle !important;
        }
        #username { background: url(../webapp/images/emil.png) 20px 14px no-repeat; }
        #password { background: url(../webapp/images/password.png) 23px 11px no-repeat; }
    </style>
</head>

<body>
<div id="app" class="container" v-cloak>
    <div class="row text-center " style="padding-top:120px;">
        <div class="col-md-12">
            <h2 style="color: white">欢迎登录牙科管理系统</h2>
        </div>
    </div>
    <div class="dowebok">

        <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
            <div class="panel-body">
                <form role="form">
                    <hr/>
                    <br/>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-tag"></i></span>

                        <input type="text" class="form-control" v-model="user.userTel" placeholder="用户名(手机号)"/>
                    </div>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                        <input type="password" class="form-control" v-model="user.userPwd" placeholder=" 密码"/>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-inline">
                        </label>
                        <span class="pull-right"></span>
                    </div>

                    <div style="text-align: center">
                        <a href="javascript:void(0)" class="btn btn-primary" @click="login">登录</a>
                    </div>
                    <hr/>
                    <div style="text-align: center">
                        <span style="color: white">未注册 ?</span> <a href="register.html" style="color: yellow">点击这里 </a>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                userTel:'',
                userPwd:''
            },
            // captchaUrl:"/captcha"

        },
        created: function () {

        },
        methods: {
            login(){
                axios.post("/adminlogin",this.user).then(res=>{
                    // alert(res.data)
                    if(res.data === "kong"){
                        alert("用户名或密码不能为空")
                    }
                    else if(res.data === "illegal"){
                        alert("用户名不合法，请重新输入")
                        this.user={}
                    }
                    else if(res.data === "no"){
                        alert("密码错误，请重新输入")
                        this.user={}
                    }
                    else if(res.data === 'yes'){
                        localStorage.setItem('user',JSON.stringify(this.user));  //把user存入缓存
                        window.location = "/end/page/workforceMage.html";
                    }
                })
            }
        }
    });
</script>
</body>
</html>
